import React, {FC} from 'react';
import "./index.less";
import {useControllableValue} from "ahooks";
import classNames from "classnames";

interface HxKwNavsProps {
  items: HxKwItemProps[];
  children?: React.ReactNode;
  className?: string;
  value?: string;
  onChange?: (value: string) => void;
  extra?: React.ReactNode,
}

export interface HxKwItemProps {
  key: string,
  label: React.ReactNode,
  // 字符串索引签名：允许任意字符串键，值为 any 类型
  [key: string]: any;
}

/**
 * 长的像card tabs的导航 页面
 */
const HxKwNavs: FC<HxKwNavsProps> = (props) => {
  const {items, children,extra, className} = props;
  const [state, setState] = useControllableValue<string>(props, {
    defaultValue: '',
  });
  return (
    <div className={classNames("hx-kw-navs-container", className)}>
      <div className={"hx-kw-navs-header"}>
        <ul className={"hx-kw-navs-tabs"}>
          {
            items.map((item) => {
              return (
                <li key={item.key}><a className={classNames({"active": state === item.key})} onClick={() => setState(item.key)}>{item.label}</a></li>
              );
            })
          }
        </ul>
        <div className={"hx-kw-navs-extra"}>
          {extra}
        </div>
      </div>
      <div className={"hx-kw-navs-content"}>
        {children}
      </div>
    </div>
  );
};

export default HxKwNavs;
